import React, { Component } from 'react';
import { Image, View, Text } from 'react-native';
import ImageModal from 'bee/components/ImageModal';
import { navOptions, BackBtn } from 'bee/navigations';
import ImagePicker from 'react-native-image-crop-picker';
import { px2dp } from 'bee/utils/px2dp';
import { colors } from 'bee/themes';

// @flow
type Props = {
  navigation: object,
};

export default class SettingPortrait extends Component<Props> {
  static navigationOptions = ({ navigation }) =>
    navOptions('设置头像', navOptions.TYPE_BLUE, {
      headerLeft: <BackBtn navigation={navigation} />,
      // headerRight: <MoreBtn onPress={() => {}} />,
    });

  constructor(props) {
    super(props);

    this.state = {
      portrait: this.props.navigation.state.params.portrait,
    };

    this.takePhoto = this.takePhoto.bind(this);
    this.selectFromAlbum = this.selectFromAlbum.bind(this);
  }

  takePhoto() {
    ImagePicker.openCamera({
      width: 500,
      height: 500,
      includeExif: true,
    })
      .then(image => {
        this.setState({
          portrait: image.path,
        });
      })
      .catch(e => console.error(e));
  }

  selectFromAlbum() {
    ImagePicker.openPicker({})
      .then(image => {
        this.setState({
          portrait: image.path,
        });
      })
      .catch(e => {
        console.error(e);
      });
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: colors.black }}>
        <ImageModal
          selectFromAlbum={() => this.selectFromAlbum}
          takePhoto={() => this.takePhoto}
        >
          <View
            style={{
              height: '100%',
              justifyContent: 'center',
            }}
          >
            <Image
              source={{ uri: this.state.portrait }}
              resizeMode="contain"
              style={{ width: px2dp(750), height: px2dp(750) }}
            />
          </View>
        </ImageModal>
      </View>
      // <View>
      //   <Image
      //     source={{ uri: this.state.portrait }}
      //     resizeMode="contain"
      //     style={{ width: px2dp(300), height: px2dp(300) }}
      //   />
      //   <ImageModal
      //     selectFromAlbum={this.selectFromAlbum}
      //     takePhoto={this.takePhoto}
      //   >
      //   <Text style={{ fontSize: px2dp(90) }}>choose</Text>
      //   </ImageModal>
      // </View>
    );
  }
}
